<template>
  <el-col :span="12" class="container-left business">
    <div class="title">青岛市民中心业务办理数据统计</div>
    <el-row>
      <el-col :span="8">
        <div class="panel-left-1 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />大厅接待情况</div>
            <div class="receptionBox">
              <div class="cumulativeNum">
                <div class="tit">累计取号量：</div>
                <ul class="totalNum"><li v-for="(item, index) in cumulativeQhArr" :key="index">{{ item }}</li></ul>
              </div>
              <el-col :span="8" class="item">
                <span class="tit">正在办理</span>
                <div class="num">{{ dtjdData.workingCount }}</div>
              </el-col>
              <el-col :span="8" class="item">
                <span class="tit">今日取号</span>
                <div class="num">{{ dtjdData.takeCount }}</div>
              </el-col>
              <el-col :span="8" class="item">
                <span class="tit">当前等待</span>
                <div class="num">{{ dtjdData.queueCount }}</div>
              </el-col>
              <el-col :span="8" class="item">
                <span class="tit">平均办理时长（分钟）</span>
                <div class="num">{{ dtjdData.avgWorkTimeCount }}</div>
              </el-col>
              <el-col :span="8" class="item">
                <span class="tit">平均等待时长（分钟）</span>
                <div class="num">{{ dtjdData.avgQueueTimeCount }}</div>
              </el-col>
              <el-col :span="8" class="item">
                <span class="tit" style="height: 76px;display: block;">今日预约数</span>
                <div class="num">{{ dtjdData.prepareCount }}</div>
              </el-col>
            </div>
          </div>
        </div>
        <div class="panel-left-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px 25px 0;">
            <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />一窗受理情况（本周）</div>
          </div>
          <div class="ycslBox">
            <div class="item" v-for="(item, index) in ycslArr" :key="index">
              <div class="num" :style="{color: item.color}">{{ item.value }}</div>
              <div class="tit" :style="{color: item.color}">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <el-row>
          <el-col :span="24">
            <div class="panel-right-1">
              <div class="bjl-panel">
                <div class="bjl-tit" id="bjlTitle">近30个工作日办件量：</div>
                <ul class="bjl-num" id="bjlArr">
                  <!-- <li
                    v-for="(item, index) in bjlArr"
                    :key="index" :style="(index+1) % 3 === 0 ? 'margin-right: 10px': 'margin-right: 5px;'">
                    {{ item }}
                  </li> -->
                </ul>
              </div>
              <div id="myChart_1" :style="{width: '100%', height: '580px'}"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="panel-right-2 common-panpel">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px 25px 0;">
                <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />2020年度示范窗口单位</div>
              </div>
              <div class="realData">
                <!--<p class="messList">
                  市农业农村局、市发展改革委、青岛大港海关、市商务局、市水务管理局、市教育局、市市场监管局、综合受理处、工商银行、EMS快递、市住房公积金管理中心、市南区行政审批服务局、李沧区行政审批服务局、胶州市行政审批服务局、即墨区行政审批服务局、城阳区行政审批服务局、莱西市行政审批服务局、平度市行政审批服务局、西海岸新区行政审批服务局、崂山区行政审批服务局、市南区行政审批服务局、西海岸新区行政审批服务局、市北区行政审批服务局、李沧区行政审批服务局、崂山区行政审批服务局、胶州市行政审批服务局、城阳区行政审批服务局、崂山区行政审批服务局公共资源交易中心、董家口经济区公共服务部、经济技术开发区公共服务部
                </p>-->
                <div style="margin-left: 30px">
                  <div>市行政审批局综合受理处、市教育局</div>
                  <div class="dept_block">市住房公积金管理中心、市商务局</div>
                  <div class="dept_block">市南区行政审批服务局、青岛大港海关</div>
                  <div class="dept_block">市水务管理局、市市场监管局</div>
                  <div class="dept_block">市农业农村局、工商银行</div>
                  <div class="dept_block">市发展改革委、EMS快递</div>
                </div>
              </div>
              <!-- <div class="realData"> -->
                 <!-- :style="{'marginTop': marginTop + 'px'}" -->
                <!-- <ul class="messList">
                  <li v-for="(item, index) in hotsArr" :key="index">
                    <div style="float: left;height: 60px;">
                      <span class="index">{{ 'TOP ' + item.INDEX }}</span>
                    </div>
                    <div style="float: left;">
                      <div style="overflow: hidden;">
                        <span class="tit">{{ item.ITEM_NAME }}</span>
                        <span class="num">{{ item.CNT }}次</span>
                      </div>
                      <div class="line"><div class="linePercent" :style="{'width': item.PERCENT + '%'}"></div></div>
                    </div>
                  </li>
                </ul>
              </div> -->
            </div>
          </el-col>
          <el-col :span="12">
            <div class="panel-right-3 common-panpel">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px;">
                <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />2020年度服务标兵</div>
                <!-- <div id="myChart_4" :style="{width: '100%', height: '300px'}"></div> -->
                <div class="serviceModel">
                <p class="modelList">
                  <span>市发展改革委：</span>程强、戴龙<br>
                  <span>市教育局：</span>秦鸣常<br>
                  <span>市文旅局：</span>刘红燕<br>
                  <span>市人力资源社会保障局：</span>刘志学、黄妙心、张璐、张若琳、毕英杰<br>
                  <span>市自然资源和规划局：</span>邱新荔、孙鸿璋、张大志、郑伟超<br>
                  <span>市生态环境局：</span>毕沛业、陈睿、辛蕾<br>
                  <span>市交通运输局：</span>张晶琰、龚敏、张岩、由晓倩、梁萍<br>
                  <span>市水务管理局：</span>赵维军、田祎、李义昌<br>
                  <span>市农业农村局：</span>王福丽、张艺蕾<br>
                  <span>市消防救援支队：</span>段小宝<br>
                  <span>市商务局：</span>宋开林、毕芳芳、王晓靓<br>
                  <span>市外办：</span>李媚、尚英、丁曰春<br>
                  <span>市市场监管局：</span>李梦军、赵霞、杜文衡、吕海洋、林田、刘晓宁<br>
                  <span>市贸促会：</span>李涛、王洪江<br>
                  <span>市国家安全局：</span>陈惜铭<br>
                  <span>市税务局：</span>范双峰、崔燕、李长峻、郭振鲁、曹璐、崔莹雪、王昊、马睿、王璐<br>
                  <span>青岛大港海关：</span>李宝刚、王玉<br>
                  <span>中国电子口岸数据中心青岛分中心：</span>郑伟、连欢<br>
                  <span>市交警支队车驾管服务站：</span>韩艳艳、徐小婷、耿铭佐<br>
                  <span>国网青岛供电公司：</span>周婷<br>
                  <span>青岛水务集团：</span>逄硕<br>
                  <span>EMS快递：</span>张歆歆<br>
                  <span>市场主体登记处：</span>纪鹤峰、张大为、王锡金、黄媛媛、刘迪、车长骏<br>
                  <span>市场主体服务处：</span>王囡囡、尚晓晓、王贝贝、马镛、李卫平、陈鹏鹏、杨晓、张建丽、刘佰林<br>
                  <span>建设审批服务处：</span>翟成波、张修铭、王慧、杨佳乐、武婧雯、于延东、黄伟利、辛天立、贾中刚、叶四武<br>
                  <span>社会事务审批服务处：</span>韩振斌、耿鑫、董连源、胡彩群、丁天泉、刘芳<br>
                  <span>综合受理处：</span>杨媛、宫业竹、祝红静、边浩杰、孙景先、金纯、王颖、高鲲、申雅妮、王雪、张震、董婷婷、郭彤、崔川第、孙晓宇、蔡晓珍、齐建清、于晓燕、王婷、修雪妮、刘瑶、马鹏凯<br>
                  <span>工商银行(驻大厅)：</span>王莉萍<br>
                  <span>市住房公积金管理中心：</span> 李夏萌、崔俐、燕飞、谷云洁、黄凯、孙蕾、张雅馨、代宇环、柳婧、王蕾、张晓欢、赵琨、曲咪、许芬、邓存晶、李莉、王璐瑶、王金栋、尹吉鹏、刘丹凤、王凯、郭玉琼、刘军仪、刘小钰、张彬、刘金宝、沈佳丽、左琳、孙静<br>
                  <span>市不动产登记中心:</span> 姜浩、宋雅婷、陈萍、张弦、侯芳钰、徐敏英、牟鸿宾、蓝蒙蒙、刘震东、王君<br>
                  <span>市社会保险专业分大厅：</span> 孔昱、廖真、王磊、张艺露、李菁、薛林、胡玉婵、王斌、车丽娜、罗荣燕、牟丹丹<br>
                  <span>市医疗保障事业中心:</span> 张晓婷、李衍力、柳赛、王雪莹<br>
                  <span>市公安局出入境管理局：</span>苏青海、张世伟、陈元成、马继华、蒋勇、吴倩倩<br>
                  <span>市公安交警支队车管所：</span>吴晓玫、于文洁、徐永昌、纪红、刘自强、杨颖莉、王曙霞、王雯、纪巍巍、国强<br>
                  <span>市南区行政审批服务局：</span>李青岩、高远、光吉州、阮梅、宋超、王航、杨斌
                </p>
              </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
var timer // 办件量刷新定时器
var timer2 // 大厅接待情况刷新定时器
export default {
  name: 'businessManagement',
  components: {
  },
  data () {
    return {
      marginTop: 0, // 数据的margin-top
      timer: '', // 定时器
      dtjdData: {}, // 大厅接待情况数据
      cumulativeQhArr: [], // 累计取号量
      oldSystemQh: 192941, // 旧排队叫号系统累计取号量
      hotsArr: [], // 高频事项
      ycslArr: [], // 一窗受理
      bjlTitle: '近30个工作日办件量：', // 办件量名称
      bjlArr: [], // 本年度办件量
      bjl_x: [], // 本年办件量x轴数据
      bjl_y_win: [], // 本年、月、周办件量y轴窗口办理数据
      bjl_y_online: [], // 本年、月、周办件量y轴网上办件数据
      bjl_y_immediate: [], // 本年、月、周办件量y轴即办件数据
      hcpData: [], // 好差评数据
      bjlJumpTime: '', // 办件量年月周切换时间\
      dtjdqkTime: '',
      dataidx: 1 // 办件量年月周切换顺序
    }
  },
  created() {
    clearInterval(timer)
    clearInterval(timer2)
    this.bjlTitle = '近30个工作日办件量：'
    // this.timer = setInterval(this.showNotice, 50) // 100表示间隔时间，数字越大滚得越快
  },
  mounted() {
    this.getYcslData() // 一窗受理情况（本周）
    this.getBjlJumpTime() // 获取切换时间
    this.getDtjdqkTime() // 获取大厅接待情况刷新时间
    this.getDtjd()
    this.getBjlData('month') // 获取本年/月/周度办件量数据
    this.getBjlEchartData('month') // 获取本年/月/周柱形图数据
    this.getHots() // 获取热点事项数据
    this.getHcpData() // 获取好差评数据
  },
  activated () {
    this.getDtjd()
    // this.dataidx = 1
    // this.getBjlData('month') // 获取本年/月/周度办件量数据
    // this.getBjlEchartData('month') // 获取本年/月/周柱形图数据
    // clearInterval(timer)
    // clearInterval(timer2)
    // this.$nextTick(() => {
    //   this.getBjlJumpTime() // 获取切换时间
    //   this.getDtjdqkTime() // 获取大厅接待情况刷新时间
    // })
  },
  methods: {
    // 数据循环滚动
    // showNotice(){
    //   this.marginTop -= 1
    //   if(this.marginTop < -this.hotsArr.length * 60){ // 滚上去36px后把前两条数据拉下来
    //     this.hotsArr.push(this.hotsArr[0])
    //     this.hotsArr.shift()
    //     this.marginTop = 0
    //   }
    // },
    // 一窗受理情况（本周）
    getYcslData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryStatic', {
        params: {
          dictType: 'acceptance'
          // type: 'week'
        }
      }).then(res => {
        let result = res.body.data
        result[0].color = '#00FF95'
        result[1].color = '#009CFF'
        result[2].color = '#00EAED'
        result[3].color = '#FFB026'
        result[4].color = '#08C7F1'
        result[5].color = '#CCFF44'
        this.ycslArr = result
      }).catch(() => {})
    },
    // 获取本年/月/周度办件量数据
    getBjlData(type) {
      this.$http.get(window.SITE_CONFIG.apiURL + '/handling/queryQuantity', {
        params: {
          type
        }
      }).then(res => {
        let result = res.body.data
        this.bjlArr = result === null ? [] : result.toString().split("")
        let ul = document.getElementById('bjlArr')
        var li = ul.firstElementChild
        while (li) {
          li.remove()
          li = ul.firstElementChild
        }
        for (let i = 0; i < this.bjlArr.length; i++) {
          const bjl = this.bjlArr[i]
          let li = document.createElement('li')
          li.innerHTML = bjl
          if((this.bjlArr.length - i + 2) % 3 === 0 ) {
            li.style = "margin-right: 12px"
          }
          ul.appendChild(li)
        }
        // console.log(document.getElementById('bjlArr'))
      }).catch(() => {})
    },
    // 获取办件量切换时间
    getBjlJumpTime() {
      let _this = this
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/params', {
        params: {
          paramCode: 1002
        }
      }).then(res => {
        let result = res.body.data
        _this.bjlJumpTime = result
        this.$nextTick(() => {
          this.changeData()
        })
      }).catch(() => {})
    },
    // 本年、月、周办件量每3秒后切换
    changeData() {
      timer = setInterval(() => {
        this.dataidx = this.dataidx === 2 ? 0 : this.dataidx + 1
        // let dataidx = Math.floor(Math.random() * 3) // 生成随机数（0、1、2）
        let type
        switch (this.dataidx) {
          case 0: // 本年
            this.bjlTitle = '本年度办件量：'
            type = 'year'
            break;
          case 1: // 本月
            this.bjlTitle = '近30个工作日办件量：'
            type = 'month'
            break;
          case 2: // 本周
            this.bjlTitle = '近7个工作日办件量：'
            type = 'week'
            break;
        }
        document.getElementById('bjlTitle').textContent = this.bjlTitle
        this.getBjlData(type)
        this.getBjlEchartData(type)
      }, 1000 * this.bjlJumpTime)
    },
    // 获取大厅接待情况切换时间
    getDtjdqkTime() {
      let _this = this
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/params', {
        params: {
          paramCode: 1003
        }
      }).then(res => {
        let result = res.body.data
        _this.dtjdqkTime = result
        this.$nextTick(() => {
          this.changeDtjdData()
        })
      }).catch(() => {})
    },
    changeDtjdData() {
      timer2 = setInterval(() => {
        this.getDtjd()
      }, 1000 * this.dtjdqkTime)
    },
    // 获取大厅接待情况数据
    getDtjd() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/service650', {}).then(res => {
        if (res.body && res.status===200) {
          let result = res.body.data
          let sumQh = 0
          if(result.allTakeCount){
            sumQh = this.oldSystemQh + result.allTakeCount
          }
          this.cumulativeQhArr = sumQh.toString().split('')
          this.dtjdData = result
        } else {
          // this.getDtjd()
        }
      }).catch(() => {})
    },
    // 获取本年/月/周柱形图数据
    getBjlEchartData(type) {
      this.bjl_x = []
      this.bjl_y_win = []
      this.bjl_y_online = []
      this.bjl_y_immediate = []
      this.$http.get(window.SITE_CONFIG.apiURL + '/handling/queryHandling', {
        params: {
          type
        }
      }).then(res => {
        let result = res.body.data
        // add by Bob 增加月度x轴数据过滤，每隔5天显示日期
        if (type === 'month') {
          // for (let i=4;i<result.length;i+=5){
          //   console.log('result::',result[i])
          //   this.bjl_x.push(result[i].days)
          // }
        }
        // console.log('this.bjl_x::',this.bjl_x)
        result.map(item => {
          if (type === 'year') {
            this.bjl_x.push(item.days + '月')
          } else {
            this.bjl_x.push(item.days)
          }
          this.bjl_y_win.push(item.win)
          this.bjl_y_online.push(item.network)
          this.bjl_y_immediate.push(item.immediate)
        })
        this.renderChart_bjl(type) // 本年、周度办件量
      }).catch(() => {})
    },
    // 本年\月\周度办件量
    renderChart_bjl(type) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_1'))
      let option = {}
      if (type === 'month') {
        option = {
          grid: {
            top: '15%',
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            show: true,
            right: '0%',
            itemWidth: 15,
            itemHeight: 15,
            textStyle: {
              color: '#fff',
              fontSize: 22
            },
          },
          xAxis: [{
            type: 'category',
            // boundaryGap: false,
            axisLabel: {
              color: '#fff',
              fontSize: 20,
              interval: 4
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#397cbc'
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#195384'
              }
            },
            data: this.bjl_x
          }],
          yAxis: [{
            name: '件',
            type: 'value',
            nameTextStyle:{
              color: '#fff',
              fontSize: 23
            },
            // min: 0,
            // max: 10000,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#ffffff',
                fontSize: 20
              }
            },
            axisLine: {
              lineStyle: {
                color: '#27b4c2'
              }
            },
            axisTick: {
              // show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#11366e'
              }
            }
          }],
          series: [{
            name: '窗口办件',
            type: 'line',
            // stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#0092f6',
                lineStyle: {
                  color: "#0092f6",
                  width: 1
                }
              }
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: 'red'
                }
              }
            },
            data: this.bjl_y_win
          }, {
            name: '网上办件',
            type: 'line',
            // stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#00d4c7',
                lineStyle: {
                  color: "#00d4c7",
                  width: 1
                },
              }
            },
            data: this.bjl_y_online
          }, {
            name: '即办件',
            type: 'line',
            // stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#e8ab51',
                lineStyle: {
                  color: "#e8ab51",
                  width: 1
                }
              }
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: 'red'
                }
              }
            },
            data: this.bjl_y_immediate
          }]
        }
      } else {
        option = {
          legend: {
            right: '0%',
            itemWidth: 15,
            itemHeight: 15,
            textStyle: {
              fontSize: 22,
              color: '#ffffff'
            }
          },
          grid: {
            top: '15%',
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          // tooltip: {
          //   trigger: 'axis',
          //   backgroundColor: "rgba(35, 47, 76, 0.5)",
          //   position: function (point) {
          //     // 固定在中部
          //     return [point[0], '40%']
          //   },
          //   textStyle:{
          //     // color:'rgba(124, 129, 173, 0.98)',
          //     fontSize: 18
          //   },
          //   axisPointer: {
          //     type: "shadow",
          //     label: {
          //       show: true,
          //       backgroundColor: 'transparent'
          //     },
          //     shadowStyle:{
          //       color:{
          //         type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
          //         colorStops: [{
          //           offset: 0, color: 'rgba(100, 101, 171, 0)' // 0% 处的颜色
          //         }, {
          //           offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' // 50% 处的颜色
          //         },{
          //           offset: 0.999999, color: 'rgba(100, 101, 171, 1)' // 100% 处的颜色
          //         },{
          //           offset: 1, color: 'rgba(100, 101, 171, 1)' // 100% 处的颜色
          //         }],
          //         global: false // 缺省为 false
          //       }
          //     }
          //   }
          // },
          xAxis: [{
            type: 'category',
            data: this.bjl_x, // x轴
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              interval: 'auto',
              // rotate: -40, // x轴文字倾斜 -25
              textStyle: {
                fontSize: 18,
                color: '#ffffff',
                fontWeight: 700
              },
              margin: 20,
              formatter:function(params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 5;  //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName
              },
            },
          }],
          yAxis: [{
            type: 'value',
            name: '件',
            nameTextStyle:{
              color: '#fff',
              fontSize: 23
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 22,
                color: '#ffffff'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(218, 219, 219, 0.1)'
              }
            }
          }],
          series: [
            {
              name: '窗口办件',
              type: 'bar',
              data: this.bjl_y_win,
              barWidth: '11px',
              label: {
                show: false, // 不显示柱上的数字
                position: 'top',
                offset: [0, 0],
                textStyle: {
                  color: '#fff',
                  fontSize: 18
                }
              },
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#0FBDFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#3F54D3' // 100% 处的颜色
                  }], false),
                  barBorderRadius: [4, 4, 0, 0]
                }
              }
            }, {
              name: '网上办件',
              type: 'bar',
              data: this.bjl_y_online,
              barWidth: '11px',
              label: {
                show: false,
                position: 'top',
                offset: [0, -10],
                textStyle: {
                  color: '#fff',
                  fontSize: 18
                }
              },
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#1ED94F' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#F2F047' // 100% 处的颜色
                  }], false),
                  barBorderRadius: [4, 4, 0, 0]
                }
              }
            }, {
              name: '即办件',
              type: 'bar',
              data: this.bjl_y_immediate,
              barWidth: '11px',
              label: {
                show: false,
                position: 'top',
                offset: [0, -20],
                textStyle: {
                  color: '#fff',
                  fontSize: 18
                }
              },
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#5EA2EF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#D12D9C' // 100% 处的颜色
                  }], false),
                  barBorderRadius: [4, 4, 0, 0]
                }
              }
            }
          ]
        }
      }
      myChart.setOption(option)

      // 动态显示tootip
      // let faultByHourIndex = 0 // 播放所在下标
      // let faultByHourTime = setInterval(function() { //使得tootip每隔三秒自动显示
      //   myChart.dispatchAction({
      //     type: 'showTip', // 根据 tooltip 的配置项显示提示框。
      //     seriesIndex: 0,
      //     dataIndex: faultByHourIndex
      //   })
      //   faultByHourIndex++;
      //   // faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
      //   if (faultByHourIndex >= option.series[0].data.length) {
      //     faultByHourIndex = 0
      //   }
      //   if (faultByHourIndex >= option.series[1].data.length) {
      //     faultByHourIndex = 0
      //   }
      //   if (faultByHourIndex >= option.series[2].data.length) {
      //     faultByHourIndex = 0
      //   }
      // }, 3000)
    },
    // 获取热点事项数据
    getHots() {
      this.$http.post(window.SITE_CONFIG.apiURL + '/service635', {
        machineCode: 'SfJjeyP0xmnS6h8R',
        url: '/web/approvalqd/hotItem/1.0',
        postdata: {
          regionCode: '',
          userCode: '',
          topN: 10
        }
      }).then(res => {
        let result = JSON.parse(res.body.result)
        let arr = []
        result.data.map((item, index) => {
          arr.push({
            id: index,
            INDEX: (index + 1),
            ITEM_NAME: item.ITEM_NAME,
            CNT: item.CNT,
            PERCENT: (result.data[index].CNT / result.data[0].CNT) * 100 // 占比计算方式：top1占比 = top1次数/top1次数 ，top2占比= top2次数/top1次数，... , top10占比= top10次数/top1次数
          })
        })
        this.hotsArr = arr
      }).catch(() => {})
    },
    // 获取好差评统计数据
    getHcpData() {
      this.$http.get(window.SITE_CONFIG.apiURL + '/static/queryStatic', {
        params: {
          dictType: 'reviews',
        }
      }).then(res => {
        let result = res.body.data
        // let result = [
        //   {name: '非常满意', value: 193},
        //   {name: '满意', value: 1},
        //   {name: '基本满意', value: 0},
        //   {name: '不满意', value: 0},
        //   {name: '非常不满意', value: 0},
        // ]

        // result.map(item => {
        //   let obj = {
        //     name: item.name,
        //     value: item.value
        //   }
        //   arr.push(obj)
        // })
        this.hcpData = result

        this.renderChart_hcp() // 好差评统计
      }).catch(() => {})
    },
    // 好差评统计
    renderChart_hcp() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_4'))

      // 绘制图表
      const option = {
        color: ['#00FF95', '#FFE400', '#FF4800', '#FFA800', '#FF01C6'],
        legend: {
          show: false,
          type: 'scroll',
          orient: 'vertical',
          left: 10,
          top: '20%',
          icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 12, // 设置宽度
          itemHeight: 12, // 设置高度
          textStyle: {
            color: '#ffffff',
            fontSize: 23
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            data: this.hcpData,
            label: {
              normal: {
                formatter: params => {
                  return (
                    params.name + ' ' + params.percent.toFixed(1) + '%'
                  )
                },
                fontSize: 22,
                padding: [0, -5, 0, -5],
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

.title {
  height: 103px;
  background: url('../../assets/background/bg_tit.png') no-repeat;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 35px 0;
  background-size: 100%;
  background-position-y: 25px;
}

.container-left {
  padding-right: 30px;

  .subTit {
    font-size: 29px;
    color: #00D2FF;
    font-weight: 600;

    img {
      position: relative;
      top: 3px;
      margin-right: 10px;
    }
  }

  .angle {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  // 大厅接待情况
  .panel-left-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 600px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 587px;
    //   left: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 641px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   top: 587px;
    //   left: 641px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .receptionBox {
      text-align: center;

      .cumulativeNum {
        text-align: left;
        margin-top: 50px;
        overflow: hidden;
        margin-left: 35px;

        .tit {
          font-size: 23px;
          color: #00FFF0;
          float: left;
          position: relative;
          top: 5px;
        }

        .totalNum {
          overflow: hidden;
          float: left;
        }
        .totalNum li {
          width: 31px;
          height: 44px;
          float: left;
          background: #002870;
          font-size: 33px;
          color: #00FFF0;
          text-align: center;
          margin-right: 5px;
          font-weight: 700;
        }
      }

      .item {
        padding-top: 40px;
        .tit {
          font-size: 27px;
          font-weight: 700;
        }

        .num {
          font-size: 38px;
          margin-top: 20px;
          color: #CCFF44;
          font-weight: 700;
          background: url('../../assets/icon/icon-numBg.png') no-repeat;
          background-position: center;
          height: 85px;
          line-height: 85px;
        }
      }
    }
  }

  // 一窗受理情况
  .panel-left-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 428px;

    .smallTit {
      float: right;
      font-size: 22px;
    }

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 0;
    //   bottom: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 641px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   left: 641px;
    //   bottom: 0;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .ycslBox {
      overflow: hidden;
      padding-left: 20px;

      .item {
        border: 1px solid #3755DA;
        // background: #0A2043;
        width: 30%;
        height: 106px;
        margin-top: 45px;
        margin-right: 17px;
        display: inline-block;
        text-align: center;

        .tit {
          font-size: 22px;
        }
        .num {
          font-size: 29px;
          font-weight: 700;
          margin-bottom: 10px;
          margin-top: 15px;
        }
      }
    }
  }
  // 2020年度示范窗口单位
  .panel-right-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 381px;
    margin-left: 20px;

    // .angle-left-top {
    //   left: 20px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 20px;
    //   bottom: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 640px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   left: 640px;
    //   bottom: 0;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
    .dept_block {
      margin-top: 10px;
    }
    .realData {
      height: 280px;
      margin: 20px 30px 0;
      padding-top: 15px;
      font-size: 23px;
      overflow: hidden;

      .messList {
        padding-top: 15px;
        animation: myMove 30s linear infinite;
        animation-fill-mode: forwards;
      }
      @keyframes myMove {
        0% {
          transform: translateY(150px);
        }
        100% {
          transform: translateY(-500px);
        }
      }

      p {
        height: 100%;
        color: #fff;
        line-height: 42px;
      }
      // ul {
      //   height: 100%;
      //   color: #fff;
      // }
      // ul li {
      //   overflow: hidden;
      //   margin-bottom: 20px;
      // }

      .index {
        width: 90px;
        font-size: 25px;
        font-weight: bold;
        float: left;
        color: #EDDF48;
        margin-right: 10px;
        margin-top: 15px;
      }

      .tit {
        font-size: 25px;
        font-weight: bold;
        float: left;
        width: 430px;
      }

      .num {
        width: 110px;
        font-size: 29px;
        color: #00FFFF;
        float: right;
        font-weight: 600;
        text-align: right;
      }

      .line {
        width: 100%;
        height: 6px;
        border-radius: 2px;
        margin: 8px 0;
        background: #141A6A;

        .linePercent {
          height: 100%;
          border-radius: 2px;
          background: linear-gradient(-90deg, #A8FF00, #54FFF1);
        }
      }
    }
  }

  // 2020年度服务标兵
  .panel-right-3 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 381px;
    margin-left: 20px;

    // .angle-left-top {
    //   right: 621px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   right: 621px;
    //   bottom: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }

    // .angle-right-bottom {
    //   right: 0;
    //   bottom: 0;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .serviceModel {
      height: 280px;
      margin: 20px 10px 0;
      padding-top: 15px;
      font-size: 20px;
      overflow: hidden;

      .modelList {
        padding-top: 15px;
        animation: modelMove 60s linear infinite;
        animation-fill-mode: forwards;
        span {
          color: #00D2FF;
        }
      }
      @keyframes modelMove {
        0% {
          transform: translateY(150px);
        }
        100% {
          transform: translateY(-1500px);
        }
      }

      p {
        height: 100%;
        color: #fff;
        line-height: 30px;
      }
    }
  }
}

</style>
<style lang="scss">


  // 本年度办件量
  .panel-right-1 {
    height: 650px;
    margin-bottom: 15px;
    padding-left: 20px;

    .bjl-panel {
      overflow: hidden;
      .bjl-tit {
        font-size: 29px;
        font-weight: bold;
        float: left;
        line-height: 60px;
      }

      .bjl-num {
        float: left;
      }
      .bjl-num li {
        float: left;
        background: #002870;
        margin-right: 5px;
        font-size: 36px;
        font-weight: bold;
        padding: 3px 6px;
      }
    }
  }

</style>
